<template>
  <div class="compare-report">
    <div class="header" @click="goBack">
      <img src="@/assets/images/back_arrow.png" class="back" alt="header" />
      <div class="subject-box">
        <div class="subject-name">{{ leftSubjectNames }}</div>
        <div class="vs">vs</div>
        <div class="subject-name">{{ rightSubjectNames }}</div>
      </div>
      <div></div>
    </div>
    <div class="compare-content" v-loading="loading">
      <section class="progress-wrapper">
        <div class="item" v-for="item in progressList" :key="item.title">
          <Title :title="item.title"></Title>
          <div class="progress-box">
            <span class="num">{{ item.leftNum }}</span>
            <el-progress
              class="progress"
              :percentage="item.percent"
              color="#41B4FF"
              :show-text="false"
            ></el-progress>
            <span class="num">{{ item.rightNum }}</span>
          </div>
        </div>
      </section>
      <section class="bar-wrapper">
        <div class="item">
          <Title title="可报考专业院校分布 top5"></Title>
          <div class="bar-box">
            <BarChart
              :data="leftMajorChartData"
              labelColor="#0169FF"
              colorFrom="#589BFD"
              colorTo="#BBDEFF"
              yAxisName="(院校数量)"
            />
            <div class="line"></div>
            <BarChart
              :data="rightMajorChartData"
              labelColor="#09841C"
              colorFrom="#81E9AB"
              colorTo="#CAF4E0"
              yAxisName="(院校数量)"
            />
          </div>
        </div>
        <div class="item">
          <Title title="可报考院校地区分布"></Title>
          <div class="bar-box">
            <BarChart
              :data="leftSchoolChartData"
              labelColor="#0169FF"
              colorFrom="#589BFD"
              colorTo="#BBDEFF"
              yAxisName="(院校数量)"
            />
            <div class="line"></div>
            <BarChart
              :data="rightSchoolChartData"
              labelColor="#09841C"
              colorFrom="#81E9AB"
              colorTo="#CAF4E0"
              yAxisName="(院校数量)"
            />
          </div>
        </div>
      </section>
      <section class="combination-wrapper">
        <div class="list-box">
          <div class="list" v-for="(item, index) in description" :key="index">
            <Title :title="item.title"></Title>
            <div class="desc-box">
              <DescItem
                v-for="(_item, _index) in item.children"
                :showTitle="false"
                :key="_index"
                :item="_item"
                :backgroundColor="_index % 2 == 0 ? '#EDF6FF' : '#F2F9EE'"
              ></DescItem>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  defineAsyncComponent,
  computed,
  onBeforeMount,
  onMounted,
  watch,
} from 'vue';
import { useRouter } from 'vue-router';
import { useSubjectSelectStore } from '@/store/subjectSelect';
import { formatData } from '@/utils/subjectData';
import {
  getSubjectInfo,
  selectComboProfile,
  selectList,
} from '@/api/subjectSelect';

const BarChart = defineAsyncComponent(() =>
  import('@/components/BarChart.vue')
);
const DescItem = defineAsyncComponent(() =>
  import('@/components/DescItem.vue')
);
const Title = defineAsyncComponent(() => import('./components/Title.vue'));

const router = useRouter();
const goBack = () => {
  router.back();
};

const store = useSubjectSelectStore();
const compareData = computed(() => store.compareData);
const province = ref(compareData.value.province);
const leftSelectSubjectList = ref(compareData.value.leftSelectSubjectList);
const rightSelectSubjectList = ref(compareData.value.rightSelectSubjectList);

const leftSubjectNames = computed(() => {
  return leftSelectSubjectList.value.map((item) => item.shortName).join('');
});
const rightSubjectNames = computed(() => {
  return rightSelectSubjectList.value.map((item) => item.shortName).join('');
});

const leftSearchAllowSubject = ref(
  leftSelectSubjectList.value.map((item) => {
    return item.id;
  })
);
const rightSearchAllowSubject = ref(
  rightSelectSubjectList.value.map((item) => {
    return item.id;
  })
);

const leftSubjectId = ref('');
const rightSubjectId = ref('');
const getSubjectInfoFn = async (list, direction) => {
  try {
    const params = {
      searchAllowSubjectList: [list],
      limitType: province.value.regionName == '北京' ? 3 : 1,
    };
    const res = await getSubjectInfo(params);
    if (res.code == 200) {
      if (direction == 'left') {
        leftSubjectId.value = res.data[0].subjectId;
      } else {
        rightSubjectId.value = res.data[0].subjectId;
      }
    }
  } catch (error) {
    console.log(error);
  }
};

const leftSchoolChartData = ref([]);
const rightSchoolChartData = ref([]);
const leftBarChartData = ref([]);
const rightBarChartData = ref([]);
const leftMajorChartData = ref([]);
const rightMajorChartData = ref([]);
const loading = ref(false);
const selectListFn = async (categoryKey, direction) => {
  loading.value = true;
  try {
    const params = {
      regionId: province.value.regionId,
      recordYear: province.value.defaultYear,
      subjectId:
        direction == 'left' ? leftSubjectId.value : rightSubjectId.value,
      categoryKey,
    };
    const res = await selectList(params);
    loading.value = false;
    if (res.code == 200 && res.data.length) {
      switch (categoryKey) {
        case 'admissibleProData': // 可报专业相关数据
          if (direction == 'left') {
            leftBarChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            );
          } else {
            rightBarChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            );
          }
          break;
        case 'top10AvailablePro': // 可报考专业前10
          if (direction == 'left') {
            leftMajorChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            ).slice(0, 5);
          } else {
            rightMajorChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            ).slice(0, 5);
          }
          break;
        case 'regionCollegeCount': // 院校地区数量详情
          if (direction == 'left') {
            leftSchoolChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            );
          } else {
            rightSchoolChartData.value = formatData(
              res.data[0]?.dataContent,
              'value'
            );
          }
          break;
        default:
          break;
      }
    }
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
};

const leftDescription = ref();
const rightDescription = ref();
const selectComboProfileFn = async (direction) => {
  console.log('province1111', province.value);
  try {
    const params = {
      searchAllowSubject:
        direction == 'left'
          ? leftSearchAllowSubject.value.join(',')
          : rightSearchAllowSubject.value.join(','),
      localRegionId: province.value.regionId,
    };
    const res = await selectComboProfile(params);
    if (res.code == 200) {
      if (direction == 'left') {
        leftDescription.value = res.data;
      } else {
        rightDescription.value = res.data;
      }
    }
  } catch (error) {
    console.log(error);
  }
};

const description = ref([]);
const getDescription = () => {
  const arr = [];
  leftDescription.value.forEach((item, index) => {
    arr.push({
      title: item.title,
      children: [item, rightDescription.value[index]],
    });
  });
  description.value = arr;
};

const progressList = ref([
  { title: '可报专业', leftNum: 500, rightNum: 555, percent: 45 },
  { title: '可报院校数', leftNum: 708, rightNum: 479, percent: 87 },
  { title: '选科招生人数', leftNum: 676, rightNum: 475, percent: 45 },
  { title: '大类招生人数', leftNum: 477, rightNum: 455, percent: 67 },
]);
const getProgressList = async () => {
  const arr = [];
  leftBarChartData.value.forEach((item, index) => {
    const leftNum = item.value;
    const rightNum = rightBarChartData.value[index].value;
    arr.push({
      title: item.name,
      leftNum,
      rightNum,
      percent: Math.round((leftNum / (leftNum + rightNum)) * 100),
    });
  });
  progressList.value = arr;
};

onBeforeMount(async () => {
  await selectComboProfileFn('left');
  await selectComboProfileFn('right');
  getDescription();
});

onMounted(async () => {
  await getSubjectInfoFn(leftSearchAllowSubject.value.join(','), 'left');
  selectListFn('top10AvailablePro', 'left');
  selectListFn('regionCollegeCount', 'left');

  await getSubjectInfoFn(rightSearchAllowSubject.value.join(','), 'right');
  selectListFn('top10AvailablePro', 'right');
  selectListFn('regionCollegeCount', 'right');

  await selectListFn('admissibleProData', 'right');
  await selectListFn('admissibleProData', 'left');
  getProgressList();
});
</script>

<style scoped lang="scss">
.compare-report {
  height: 100vh;
  background: url('@/assets/images/homeBg.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 0 60px 60px 60px;
  box-sizing: border-box;
  overflow: hidden;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 0 23px 0;
    position: relative;
    .back {
      position: absolute;
      left: 0;
      width: 48px;
      height: 48px;
    }
    .subject-box {
      width: 44%;
      display: flex;
      justify-content: space-between;
      .subject-name {
        font-weight: bold;
        font-size: 30px;
        color: #000000;
        line-height: 40px;
        position: relative;
        &::before {
          content: '';
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #12a1ff;
          position: absolute;
          left: -36px;
          top: 10px;
        }
        &:last-child {
          &::before {
            background: #00a442;
          }
        }
      }
      .vs {
        font-weight: bold;
        font-size: 34px;
        color: #000000;
        line-height: 42px;
      }
    }
  }
  .compare-content {
    padding: 28px 56px;
    background: #ffffff;
    border-radius: 32px 32px 20px 20px;
    height: calc(100vh - 160px);
    overflow-y: auto;
    .progress-wrapper {
      width: 1125px;
      margin: 0 auto;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 48px;
        .progress-box {
          display: flex;
          align-items: center;
          .progress {
            width: 960px;
            margin: 0 32px;
          }
          .num {
            font-weight: bold;
            font-size: 34px;
            color: #333333;
            line-height: 48px;
          }
          :deep(.el-progress-bar__inner) {
            border-radius: 0;
          }
          :deep(.el-progress-bar__outer) {
            height: 36px !important;
            background-color: #81e9ab;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .bar-wrapper {
      .item {
        margin-top: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .bar-box {
          display: flex;
          height: 480px;
          width: calc(100% - 120px);
          .line {
            width: 2px;
            height: 86%;
            background-color: #bec9d7;
            margin: 40px 60px 0 60px;
          }
        }
      }
    }
    .combination-wrapper {
      margin-top: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .list-box {
        .list {
          margin-bottom: 24px;
          margin-top: 80px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .desc-box {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 124px;
            position: relative;
            :deep(.content) {
              height: calc(100% - 60px);
            }
            &::before {
              content: '';
              position: absolute;
              top: 0;
              bottom: 0;
              left: 50%;
              width: 2px;
              background-color: #bec9d7;
              transform: translateX(-50%);
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
</style>
